<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        $.get('echarts/yinchuan.json', function (yCjson) {
        echarts.registerMap('银川', yCjson);
        var chart = echarts.init(document.getElementById('main'));
        
        option = {
            title: {
                text: '四色预警',
                x:'center'
            },
            dataRange:{
                min:0,
                max:500,
                text:['高','低'],
                realtime:true,
                calculable:true,
                color:['orangered','yellow','green']
            },
            series:[
                {
                    name:'犯罪数量',
                    type:'map',
                    map:'银川',
                    mapLocation:{
                        y:60
                    },
                    itemSytle:{
                        emphasis:{label:{show:false}}
                    },
                    data:[
                        {name:'西夏区',value:Math.round(Math.random()*500)},
                        {name:'贺兰县',value:Math.round(Math.random()*500)},
                        {name:'金凤区',value:Math.round(Math.random()*500)},
                        {name:'永宁县',value:Math.round(Math.random()*500)},
                        {name:'灵武市',value:Math.round(Math.random()*500)},
                        {name:'兴庆区',value:Math.round(Math.random()*500)}
                    ]
                }
            ],
            
        };
        chart.setOption(option);
});
    </script>
</body>
</html>
